---
id: 优化产出代码
title: 优化-产出代码
---

## 小图片 base64 编码

```js
// webpack.config.js

{
    test: /\.(jpg|jpeg|png|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'img/',
            limit: 10240, // 小于等于10k的将转换成base64,
            publicPath: 'https://cdn.img.com' // 可设置图片的cdn地址
        }
    }
}
```

## bundle 加 hash

```js
module.exports = {
  output: {
    filename: "[name].[contentHash:8].js",
  },
};
```

## 懒加载

## 提取公共代码

## 使用 CDN 加速

## 使用 production

- 自动开启代码压缩
- vue React 等会自动删掉调试代码
- 启动 Tree-Shaking

## js 压缩

- Webpack 4 后引入 uglifyjs-webpack-plugin
- 支持 ES6 替换为 terser-webpack-plugin

## Babel7 优化配置

- 在需要的地方引 polyfill
```js
// babel.config.js
presets:[{ UseBuiltIns: "usage" }];
```
- 辅助函数的按需引入 
```js
// babel.config.js
 plugin:[ "@babel/plugin-transform-runtime"]
 ```
- 根据目标浏览器按需转换代码
https://github.com/browserslist/browserslist


## 开启 Scope Hosting

```js
// hello.js
export default "hello";

// index.js
import str from "./hello.js";

console.log(str);
```

默认会打成两个函数, 开启开启 Scope Hosting 可以把两个合并成一个函数。

- 优点
  - 代码体积更小
  - 创建函数作用域更少
  - 执行效率更高

```js
// webpack.config.js
const ModuleConcatenationPlugin = require("webpack/lib/optimize/ModuleConcatenationPlugin");
module.exports = {
  resolve: {
    mainFields: ["jsnext:main", "browser", "main"], // 针对npm中第三方模块优先采用jsnext:main中指向的ES6模块化语法的文件
  },
  plugins: [
    //开启 Scope Hoisting
    new ModuleConcatenationPlugin(),
  ],
};
```
